<template>
  <div>
    <el-card lable-width="200px" :inline="true">
      <!-- 筛选表单区域 -->
      <el-form border label-width="200px;" :inline="true" :model="items">
        <el-form-item label="标签名称" prop="title">
          <el-input
            size="small"
            v-model="items.title"
            placeholder="请根据文章标题搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select size="small" placeholder="请选择" v-model="items.state">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <!-- 查询区 -->
          <el-row :gutter="20">
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="initData"
                  >搜索</el-button
                >
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-button
                  size="small"
                  icon="el-icon-refreseh"
                  @click="resetBtn"
                  >重置</el-button
                >
              </div></el-col
            >
            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <el-button
                  type="success"
                  icon="el-icon-plus"
                  plain
                  size="small"
                  @click="showDialog = true"
                  >新增</el-button
                >
              </div></el-col
            >
          </el-row>
        </el-form-item>
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">
              <el-tag
                icon="el-icon-warning-outline"
                style="width: 100%"
                type="info"
                >{{ `${counts}条记录` }}</el-tag
              >
            </div></el-col
          >
        </el-row>
        <!-- 表格区域 -->
        <el-table style="width: 200%" :data="list">
          <el-table-column
            label="序号"
            width="100"
            type="index"
          ></el-table-column>
          <!-- -------------------------文章标题带视频----------------------------- -->
          <!-- 有url地址我就可以有那个视频icon,并且点击之后有弹出框,弹出视频,有上面的那个关闭弹框按钮,修改的时候也是,只有要url就添加 -->
          <!-- <i class="el-icon-delete"></i> -->

          <el-table-column label="文章标题" width="400">
            <template slot-scope="{ row }">
              <!-- {{showInfo(row)}} -->
              <span style="margin-left: 10px"
                >{{ row.title }}&nbsp;&nbsp;
                <i
                  v-if="row.videoURL"
                  class="el-icon-film"
                  @click="icon(row)"
                ></i
              ></span>
            </template>
          </el-table-column>
          <el-table-column
            label="阅读数"
            width="200"
            prop="visits"
          ></el-table-column>
          <el-table-column
            label="录入人"
            width="200"
            prop="username"
          ></el-table-column>
          <el-table-column
            label="录入时间"
            width="260"
            prop="createTime"
          ></el-table-column>
          <!-- -------------------------------------------- -->
          <el-table-column label="状态" width="200" prop="state">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" disabled>{{
                row.state === 1 ? "已禁用" : "已启用"
              }}</el-button>
            </template></el-table-column
          >
          <!-- --------------------操作区--------------------------------- -->
          <el-table-column label="操作" width="200" prop="state">
            <template slot-scope="{ row }">
              <el-button type="text" @click="showaa(row)">预览</el-button>
              <!-- ===================================================== -->
              <el-button type="text" @click="start(row)">{{
                row.state === 0 ? "禁用" : "启用"
              }}</el-button>
              <el-button
                type="text"
                @click="edit(row)"
                :disabled="row.state === 0"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="row.state === 0"
                @click="delBtn(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="items.page"
          :page-sizes="[10, 20, 30]"
          :page-size="items.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
        <!-- -------------------------------------------------增删改查区域------------- -->
        <el-dialog width="1000px" title="添加文章" :visible.sync="showDialog">
          <el-form
            ref="form"
            :model="formData"
            :rules="rules"
            :label-position="labelPosition"
          >
            <el-form-item label="文章标题">
              <el-input
                size="large"
                v-model="formData.title"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="文章标题">
              <vue-editor v-model="formData.articleBody"></vue-editor>
              <!-- <el-input autocomplete="off"></el-input> -->
            </el-form-item>
            <el-form-item label="视频地址">
              <el-input
                v-model="formData.videoURL"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="showDialog = false">取 消</el-button>
            <el-button type="primary" @click="btnOk">确 定</el-button>
          </div>
        </el-dialog>
        <!-- --------------------------------预览文章------------------------------------------ -->
        <el-dialog title="预览文章" :visible.sync="showedit" width="width">
          <h3>{{ listaa.title }}</h3>
          <span>{{ listaa.createTime }}</span
          >&nbsp;&nbsp;&nbsp; <span>{{ listaa.username }}</span
          >&nbsp;&nbsp;&nbsp;
          <el-link>查看<i class="el-icon-view el-icon--right"></i></el-link>
          <hr />
          <p v-html="listaa.articleBody"></p>
        </el-dialog>
        <!-- -----------------------------------video------------------------------------------------ -->
        <!-- <el-dialog>
          
        </el-dialog> -->
        <el-dialog :visible.sync="isDshow">
          <div>
            <video
              :src="items.videoURL"
              width="100%"
              height="100%"
              controls
              v-show="isShow"
            ></video>
          </div>
        </el-dialog>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
// import Add from '@/views/articles/components/add.vue'
import {
  getarticleListAPI,
  addarticleApi,
  delarticleInfoApi,
  articleInfo,
  getTageditApis,
  articleInfoApi,
} from "@/api/article";
// import { getUserInfoApi } from '@/api/user'
export default {
  name: "articleAA",
  components: {
    VueEditor,
  },
  data: () => ({
    articleBody: "<h1>请输入文章内容</h1>",
  }),
  data() {
    return {
      labelPosition: "left",
      list: [],

      isShow: false,
      isDshow: false,
      //控制弹框组件
      showedit: false,
      showDialog: false,
      // 0是f禁用 、1、true启用-------------------show
      counts: 0,
      rules: {
        title: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },
      options: [
        {
          value: "0",
          label: "已启用",
        },
        {
          value: "1",
          label: "已禁用",
        },
      ],
      // tags
      items: {
        page: 1,
        pages: 2,
        pagesize: 10,
        keyword: "",
      },
      formData: {
        title: "",
        articleBody: "",
        videoURL: "",
      },
      // 存储预览的文字
      listaa: "",
      // --------------视屏弹框
    };
  },
  mounted() {},
  created() {
    this.initData();
    // this.initadd();
  },
  methods: {
    async initData() {
      let { items, counts } = await getarticleListAPI(this.items);
      // this.listaa = items.username;
      // console.log('listaa',this.listaa);
      (this.list = items), (this.counts = counts);
    },
    handleSizeChange(val) {
      this.items.pagesize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.items.page = val;
      this.initData();
    },
    resetBtn() {
      this.items = {};
      this.initData();
    },

    async btnOk() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        return console.log(error);
      }
      if (this.formData.id) {
        await getTageditApis(this.formData);
        this.$message.success("更新成功");
      } else {
        await addarticleApi(this.formData);
        this.$message.success("新增成功");
      }
      this.showDialog = false;
      this.initData();
    },
    // 删除
    async delBtn(id) {
      await this.$confirm("此操作讲永久删除该学科，是否继续？");
      await delarticleInfoApi(id);
      this.$message.success("删除成功");
      if (this.items.page !== 1 && this.items.length === 1) {
        this.items.page--;
      }
      this.initData();
    },
    // 修改
    async edit(val) {
      let res = await articleInfo(val.id);
      // console.log(res);
      this.formData = res;
      this.showDialog = true;
    },
    // -----------------------------------------------------------------------
    // 状态
    async start(val) {
      // console.log(val.id);
      if (val.state === 1) {
        //开启
        val.state = 0;
      } else {
        val.state = 1;
      }
      const res = await articleInfoApi(val.id, val.state);
      // 点击禁用的时候换成启用状态改为0，修改和删除高亮/反之为1启用变禁用，修改和删除不高亮
      this.$message.success("操作成功");
      this.initData();
      // console.log(show);
    },
    // 预览弹框操作
    async showaa(row) {
      // const userinfo = await getUserInfoApi(row.creatorID)
      // console.log(userinfo);
      const res = await articleInfo(row.id); //详情
      this.listaa = { ...res, username: row.username };
      this.showedit = true;
    },
    async icon(val) {
      // console.log('1111');
      const res = await articleInfo(val.id);
      this.items = { ...res, videoURL: val.videoURL };
      this.isShow = true;
      this.isDshow = true;
    },
    // showInfo(val) {
    //   console.log(val);
    // }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background-color: rgb(64, 158, 255);
}
::v-deep .el-dialog__title {
  color: #fff;
}
::v-deep .el-dialog__close {
  color: #fff;
}
::v-deep .el-icon-film {
  color: rgb(64, 158, 255);
  font-size: 20px;
}

// ::v-deep .el-dialog__body {
//   padding: 0;
// }

// ::v-deep .el-dialog__header {
//   padding: 0;
// }
</style>